<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  

  
  <title>HTML入门 | 蔡进东的日志</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="HTML全称Hypertext markup language，它是整个网页的内容（骨架）。学习HTML就是要掌握好它常用的标签，html标签在网页中又叫html元素。它分为block元素，inline元素和inline-block元素。这些都只是标签默认的属性，实际开发中都可以通过css改变。 HTML版本HTML版本主要有：HTML 4.01 → XHTML → HTML 5 → HTML 5">
<meta name="keywords" content="html">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML入门">
<meta property="og:url" content="http://cai4633.github.io/2020/03/13/HTML入门/index.html">
<meta property="og:site_name" content="蔡进东的日志">
<meta property="og:description" content="HTML全称Hypertext markup language，它是整个网页的内容（骨架）。学习HTML就是要掌握好它常用的标签，html标签在网页中又叫html元素。它分为block元素，inline元素和inline-block元素。这些都只是标签默认的属性，实际开发中都可以通过css改变。 HTML版本HTML版本主要有：HTML 4.01 → XHTML → HTML 5 → HTML 5">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2020-05-21T04:01:39.401Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="HTML入门">
<meta name="twitter:description" content="HTML全称Hypertext markup language，它是整个网页的内容（骨架）。学习HTML就是要掌握好它常用的标签，html标签在网页中又叫html元素。它分为block元素，inline元素和inline-block元素。这些都只是标签默认的属性，实际开发中都可以通过css改变。 HTML版本HTML版本主要有：HTML 4.01 → XHTML → HTML 5 → HTML 5">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">蔡进东的日志</a>
      </h1>
      
      <h2 id="subtitle-wrap">
        <a href="/" id="subtitle">不要在最该奋斗的年纪选择去偷懒，只有度过一段连自己都被感动了的日子，才能变成那个最好的自己.</a>
      </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
        <a class="main-nav-link" href="/">Home</a>
        
        <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
        <a id="nav-search-btn" class="nav-icon" title="搜索"></a>
      </nav>
      <div class="local-search local-search-plugin">
        <input type="search" placeholder="站内搜索" id="local-search-input" class="local-search-input-cls" />
        <div id="local-search-result" class="local-search-result-cls"></div>
      </div>
      <!-- <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://cai4633.github.io"></form>
      </div> -->
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-HTML入门" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/03/13/HTML入门/" class="article-date">
  <time datetime="2020-03-12T17:14:58.000Z" itemprop="datePublished">2020-03-13</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/html/">html</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      HTML入门
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>HTML全称<strong>Hypertext markup language</strong>，它是整个网页的内容（骨架）。学习HTML就是要掌握好它常用的标签，html标签在网页中又叫html元素。它分为block元素，inline元素和inline-block元素。这些都只是标签默认的属性，实际开发中都可以通过css改变。</p>
<h2 id="HTML版本"><a href="#HTML版本" class="headerlink" title="HTML版本"></a>HTML版本</h2><p>HTML版本主要有：HTML 4.01 → XHTML → HTML 5 → HTML 5.1，由W3C根据浏览器实际情况编写文档。<code>&lt;!DOCTYPE HTML&gt;</code>用来声明文档类型。</p>
<h2 id="HTMl标签"><a href="#HTMl标签" class="headerlink" title="HTMl标签"></a>HTMl标签</h2><h3 id="常见的html标签"><a href="#常见的html标签" class="headerlink" title="常见的html标签"></a>常见的html标签</h3><p><code>(html、body、head）、a、form、input、button、h1(h2、h3 )、p、ul、ol、small、strong、div、span、kbd、video、audio、svg。</code>这些标签除了div和span，其他标签都有默认样式。</p>
<h3 id="空标签"><a href="#空标签" class="headerlink" title="空标签"></a>空标签</h3><p>空标签里面不能有内容（子元素），通常在一个空元素上不需要使用闭合标签。例如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;br /&gt; 换行标签，通常用于文本格式换行</span><br><span class="line">&lt;hr/&gt; 水平分割线</span><br><span class="line">&lt;input /&gt;  用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。</span><br><span class="line">&lt;link /&gt; 指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件。</span><br><span class="line">&lt;img /&gt; 文档中的图像。</span><br><span class="line">&lt;meta /&gt; 元素表示那些不能由其它HTML元相关元素 (&lt;base&gt;, &lt;link&gt;, &lt;script&gt;, &lt;style&gt; 或 &lt;title&gt;) 之一表示的任何元数据信息. </span><br><span class="line"></span><br><span class="line">&lt;isindex /&gt; 使浏览器显示一个对话框，提示用户输入单行文本。</span><br><span class="line">&lt;area /&gt; 在图片上定义一个热点区域</span><br><span class="line">&lt;param /&gt;  定义了 &lt;object&gt;的参数</span><br><span class="line">&lt;col /&gt; 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于`&lt;colgroup&gt;`元素内。</span><br><span class="line">&lt;bgsound /&gt; IE浏览器中设置网页背景音乐的元素。</span><br><span class="line">&lt;wbr /&gt; 一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行。</span><br><span class="line">&lt;base /&gt; 指定用于一个文档中包含的所有相对URL的基本URL。</span><br><span class="line">&lt;nextid /&gt;  是一个过时的 HTML 元素, 它使下一个 web 设计工具能够为其定位点生成自动名称标签。 它是由该 web 编辑工具自动生成的, 不需要手动调整或输入。这个元素的区别是成为第一个元素, 成为一个 &quot;丢失的标签&quot; 被淘汰的官方公共 DTD 的 HTML 版本。</span><br><span class="line">&lt;basefont /&gt; 用来设置文档的默认字体大小。（目前已废弃 ）</span><br><span class="line">&lt;embed /&gt; 用于表示一个外部应用或交互式内容的集合点，换句话说，就是一个插件。 </span><br><span class="line">&lt;keygen /&gt;  为了方便生成密钥材料和提交作为 [HTML form]的一部分的公钥.这种机制被用于设计基于 Web 的证书管理系统。(已废弃)</span><br><span class="line">&lt;plaintext /&gt; 将起始标签后面的任何东西渲染为纯文本，不会解释为 HTML。它没有闭合标签，因为任何后面的东西都会看做纯文本。(已废弃)</span><br><span class="line">&lt;spacer /&gt; 它可以向页面插入间隔。它由 Netscape 设计，用于实现单像素布局图像的相同效果，Web 设计师用它来向页面添加空白，而不需要实际使用图片。（已废弃）</span><br></pre></td></tr></table></figure>

<h3 id="可替换元素"><a href="#可替换元素" class="headerlink" title="可替换元素"></a>可替换元素</h3><p>可替换元素（replaced element）的内容不受当前文档的样式的影响，CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。例如：<code>&lt;img&gt; &lt;iframe&gt; &lt;video&gt; &lt;embed&gt;</code>,某些元素仅在特定的情况下是可替换元素，例如：<code>&lt;option&gt; &lt;audio&gt; &lt;canvas&gt; &lt;object&gt; &lt;applet&gt; &lt;input&gt;</code>.用 CSS <code>content</code> 属性插入的对象是匿名的可替换元素。它们并不存在于 HTML 标记中，因此是“匿名的”。</p>
<h3 id="几个重点标签"><a href="#几个重点标签" class="headerlink" title="几个重点标签"></a>几个重点标签</h3><h4 id="iframe和a标签"><a href="#iframe和a标签" class="headerlink" title="iframe和a标签"></a>iframe和a标签</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;iframe src=&apos;https://qq.com&apos; name=&apos;page1&apos; frameborder=&apos;0&apos;&gt;   //嵌套页面 页面默认大小是100*50px</span><br><span class="line">&lt;a href=&apos;#&apos; target=&apos;_self&apos;&gt;Hello&lt;/a&gt;  //跳转标签（get请求）</span><br></pre></td></tr></table></figure>

<ol>
<li><p>a标签的target取值：<code>_self(defaults) _blank  _parent _top framename</code><br>其中_parent和_top是结合iframe嵌套父子关系来确定的。通过指定target=’framename’可以使页面在对应的iframe中显示。</p>
</li>
<li><p>通过a标签下载文件</p>
<ol>
<li>通过指定a标签的download属性可以强制文件下载。</li>
<li>如果不加download，而且http响应的内容浏览器不能展示那么文件也会被下载，例如：content-type:application/octet-stream.</li>
</ol>
</li>
<li><p>a标签herf=’’的取值：(最好不要用file协议（file:///)来打开文件。)</p>
<ol>
<li><code>http(s)://XXX</code>    http/https协议地址。    （例如 <a href="http://qq.com" target="_blank" rel="noopener">http://qq.com</a>) 浏览器会向服务器发送get请求</li>
<li><code>//XXX</code>        继承当前文件协议。 （例如 //qq.com) 浏览器会向服务器发送get请求</li>
<li><code>XXX</code>          相对路径。 （例如 qq.com) ，浏览器会向服务器发送get请求</li>
<li><code>#XXX</code>     锚点。跳转到当前页面指定的id处，且锚点会添加到url后面，但是浏览器不会向服务器发送请求</li>
<li><code>?name=cai</code>  浏览器会向服务器发送get请求 ,查询字符串会添加到url后面</li>
<li><code>javascipt:;</code> javascript伪协议。</li>
</ol>
</li>
</ol>
<h4 id="form和input标签"><a href="#form和input标签" class="headerlink" title="form和input标签"></a>form和input标签</h4><p>form和a标签都可以发起请求。a只能发起get请求，form既可以发get,也可以发post请求。不过form一般用来发post请求，提交表单内容。它们target属性的功能也是一样的。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;form action=&apos;index.php&apos; method=&apos;post&apos; target=&apos;&apos;&gt;</span><br><span class="line">    &lt;input type=&apos;password&apos; name=&apos;XXX&apos; value=&apos;&apos;&gt; </span><br><span class="line">    &lt;input type=&apos;checkbox&apos; name=&apos;XXX&apos; value=&apos;&apos;&gt; </span><br><span class="line">    &lt;input type=&apos;radio&apos; name=&apos;XXX&apos; value=&apos;&apos;&gt; </span><br><span class="line">    &lt;select name=&apos;hobby&apos; multiple&gt;</span><br><span class="line">        &lt;option value=&apos;basketball&apos;&gt;basketball&lt;/opiton&gt;</span><br><span class="line">        &lt;option value=&apos;baseball&apos; disabled&gt;baseball&lt;/opiton&gt;</span><br><span class="line">        &lt;option value=&apos;soccer&apos;&gt;soccer&lt;/opiton&gt;</span><br><span class="line">    &lt;/select&gt;</span><br><span class="line">    &lt;textarea style=&apos;resize:none&apos; name=&apos;info&apos;&gt;&lt;/textarea&gt;  </span><br><span class="line">    &lt;input type=&apos;submit&apos; name=&apos;XXX&apos; value=&apos;&apos;&gt; </span><br><span class="line">    &lt;button&gt;button&lt;/button&gt;     当表单中没有提交按钮，那么未设置type的button按钮会自动升级为submit按钮</span><br><span class="line">&lt;/form&gt;</span><br></pre></td></tr></table></figure>

<ol>
<li>form中的input<strong>必须添加name和value属性</strong>，它们在提交的时候会以键值对的形式发送给服务器。这时候name和id意义不同。</li>
<li>input[type=’checkbox’]和input[type=’radio’]可以通过name属性给选项分组，radio默认value是’on’.</li>
<li>label指定标签的两种用法：<ol>
<li>指定for<br> <code>&lt;label for=&#39;check&#39;&gt;性别&lt;/label&gt;&lt;input id=&#39;check&#39; type=&#39;checkbox&#39; name=&#39;sex&#39; value=&#39;man&#39;&gt;man</code></li>
<li>label包裹input<br><code>&lt;label&gt;性别&lt;input id=&#39;check&#39; type=&#39;checkbox&#39; name=&#39;sex&#39; value=&#39;man&#39;&gt;man&lt;/label&gt;</code></li>
</ol>
</li>
<li>textarea 默认是可变尺寸的。通过css <code>resize:none</code>可以取消默认样式。宽度和高度也最好用css来设置，rows和cols属性不可靠，尤其是cols。</li>
<li>input[type=button]和button标签的区别：input是空标签，button不是；而且<strong>未设置type的button可以自动升级为submit</strong>。</li>
</ol>
<h4 id="table标签"><a href="#table标签" class="headerlink" title="table标签"></a>table标签</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;table border=&quot;1&quot;&gt;</span><br><span class="line">	&lt;colgroup&gt;</span><br><span class="line">		&lt;col bgcolor=&apos;red&apos; width=&apos;100&apos;&gt;</span><br><span class="line">		&lt;col bgcolor=&apos;red&apos; width=&apos;100&apos;&gt;</span><br><span class="line">		&lt;col bgcolor=&apos;red&apos; width=&apos;100&apos;&gt;</span><br><span class="line">		&lt;col bgcolor=&apos;red&apos; width=&apos;100&apos;&gt;</span><br><span class="line">		&lt;col bgcolor=&apos;red&apos; width=&apos;100&apos;&gt;</span><br><span class="line">	&lt;/colgroup&gt;</span><br><span class="line">	&lt;thead&gt;</span><br><span class="line">		&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;姓名&lt;/th&gt;&lt;th&gt;班级&lt;/th&gt;&lt;th&gt;语文&lt;/th&gt;&lt;th&gt;数学&lt;/th&gt;&lt;/tr&gt;</span><br><span class="line">	&lt;/thead&gt;</span><br><span class="line">	&lt;tbody&gt;</span><br><span class="line">		&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;td&gt;小明&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;60&lt;/td&gt;&lt;/tr&gt;</span><br><span class="line">		&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;td&gt;小红&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;58&lt;/td&gt;&lt;td&gt;49&lt;/td&gt;&lt;/tr&gt;</span><br><span class="line">		&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;td&gt;小明&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;60&lt;/td&gt;&lt;/tr&gt;</span><br><span class="line">		&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;td&gt;小红&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;58&lt;/td&gt;&lt;td&gt;49&lt;/td&gt;&lt;/tr&gt;</span><br><span class="line">	&lt;/tbody&gt;</span><br><span class="line">	&lt;tfoot&gt;</span><br><span class="line">		&lt;tr&gt;&lt;th&gt;平均分&lt;/th&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;80&lt;/td&gt;&lt;/tr&gt;</span><br><span class="line">	&lt;/tfoot&gt;</span><br><span class="line">&lt;/table&gt;</span><br></pre></td></tr></table></figure>

<ol>
<li>以上是table的完整结构，其中colgroup、thead、tbody和tfoot的顺序可以打乱，浏览器会自动调整好顺序thead→tbody→ tfoot。</li>
<li>如果不加thead、tbody和tfoot这些标签，那么浏览器会自动把内容放入tbody中。</li>
<li>colgroup可以设置table的部分样式。css中<code>border-collapse:collapse</code>可以设置table的border样式。</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <!--<a data-url="http://cai4633.github.io/2020/03/13/HTML入门/" data-id="ckjqth4qo000r2gw0xxqfxxjg" class="article-share-link">Share</a>-->
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/html/">html</a></li></ul>

    </footer>
  </div>
  <!---->
    <!--
<nav id="article-nav">
  
    <a href="/2020/03/15/算法和数据结构入门/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          算法和数据结构入门
        
      </div>
    </a>
  
  
    <a href="/2020/03/07/http入门/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">http入门</div>
    </a>
  
</nav>
-->
  <!---->
</article>

</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2021/01/08/前端鉴权总结/">前端鉴权总结</a>
          </li>
        
          <li>
            <a href="/2021/01/03/web性能优化/">web性能优化</a>
          </li>
        
          <li>
            <a href="/2020/12/31/nodejs入门/">nodejs 入门</a>
          </li>
        
          <li>
            <a href="/2020/12/27/vue单页面应用白屏屏优化/">vue单页面应用白屏屏优化</a>
          </li>
        
          <li>
            <a href="/2020/12/26/逸辰音乐问题点/">逸辰音乐问题点</a>
          </li>
        
      </ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">归档</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/01/">一月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/12/">十二月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/09/">九月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/08/">八月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/07/">七月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/05/">五月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/04/">四月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/03/">三月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/02/">二月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">十一月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">十月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">七月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">六月 2019</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">分类</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/ES6/">ES6</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/css/">css</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/html/">html</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/js/">js</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/nodejs/">nodejs</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue/">vue</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端/">前端</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端项目/">前端项目</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/服务端/">服务端</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/算法/">算法</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Apache/">Apache</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Array/">Array</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/BFC/">BFC</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CORS/">CORS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DOM/">DOM</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DOM-diff/">DOM diff</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JSONP/">JSONP</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Vue3/">Vue3</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/absolute/">absolute</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ajax/">ajax</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/auto/">auto</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/background/">background</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/const/">const</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/devServer/">devServer</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/function/">function</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/git/">git</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/github/">github</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hexo/">hexo</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/host/">host</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html/">html</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/http/">http</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery/">jquery</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/js/">js</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/leancloud/">leancloud</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/let/">let</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nodejs/">nodejs</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/npm/">npm</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/position/">position</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/promise/">promise</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/proxy/">proxy</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/script标签/">script标签</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/session-cookie/">session-cookie</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/token/">token</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/v-if/">v-if</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/v-show/">v-show</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vDOM/">vDOM</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vHost/">vHost</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue/">vue</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue-cli/">vue-cli</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vuec/">vuec</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue生命周期/">vue生命周期</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/width/">width</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/z-index/">z-index</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/原型链/">原型链</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/同源/">同源</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/外边距/">外边距</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/层叠上下文/">层叠上下文</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能优化/">性能优化</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/数据结构/">数据结构</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/浏览器/">浏览器</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/百分比/">百分比</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/算法/">算法</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/精华/">精华</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/软件下载/">软件下载</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/鉴权/">鉴权</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签云</h3>
    <div class="widget tagcloud">
      <a href="/tags/Apache/" style="font-size: 10px;">Apache</a> <a href="/tags/Array/" style="font-size: 10px;">Array</a> <a href="/tags/BFC/" style="font-size: 10px;">BFC</a> <a href="/tags/CORS/" style="font-size: 10px;">CORS</a> <a href="/tags/DOM/" style="font-size: 10px;">DOM</a> <a href="/tags/DOM-diff/" style="font-size: 10px;">DOM diff</a> <a href="/tags/JSONP/" style="font-size: 10px;">JSONP</a> <a href="/tags/Vue3/" style="font-size: 10px;">Vue3</a> <a href="/tags/absolute/" style="font-size: 10px;">absolute</a> <a href="/tags/ajax/" style="font-size: 10px;">ajax</a> <a href="/tags/auto/" style="font-size: 10px;">auto</a> <a href="/tags/background/" style="font-size: 10px;">background</a> <a href="/tags/const/" style="font-size: 10px;">const</a> <a href="/tags/devServer/" style="font-size: 10px;">devServer</a> <a href="/tags/function/" style="font-size: 10px;">function</a> <a href="/tags/git/" style="font-size: 10px;">git</a> <a href="/tags/github/" style="font-size: 10px;">github</a> <a href="/tags/hexo/" style="font-size: 10px;">hexo</a> <a href="/tags/host/" style="font-size: 10px;">host</a> <a href="/tags/html/" style="font-size: 10px;">html</a> <a href="/tags/http/" style="font-size: 16.67px;">http</a> <a href="/tags/jquery/" style="font-size: 10px;">jquery</a> <a href="/tags/js/" style="font-size: 20px;">js</a> <a href="/tags/leancloud/" style="font-size: 10px;">leancloud</a> <a href="/tags/let/" style="font-size: 10px;">let</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/npm/" style="font-size: 10px;">npm</a> <a href="/tags/position/" style="font-size: 10px;">position</a> <a href="/tags/promise/" style="font-size: 10px;">promise</a> <a href="/tags/proxy/" style="font-size: 10px;">proxy</a> <a href="/tags/script标签/" style="font-size: 10px;">script标签</a> <a href="/tags/session-cookie/" style="font-size: 10px;">session-cookie</a> <a href="/tags/token/" style="font-size: 10px;">token</a> <a href="/tags/v-if/" style="font-size: 10px;">v-if</a> <a href="/tags/v-show/" style="font-size: 10px;">v-show</a> <a href="/tags/vDOM/" style="font-size: 10px;">vDOM</a> <a href="/tags/vHost/" style="font-size: 10px;">vHost</a> <a href="/tags/vue/" style="font-size: 13.33px;">vue</a> <a href="/tags/vue-cli/" style="font-size: 10px;">vue-cli</a> <a href="/tags/vuec/" style="font-size: 10px;">vuec</a> <a href="/tags/vue生命周期/" style="font-size: 10px;">vue生命周期</a> <a href="/tags/width/" style="font-size: 10px;">width</a> <a href="/tags/z-index/" style="font-size: 10px;">z-index</a> <a href="/tags/原型链/" style="font-size: 10px;">原型链</a> <a href="/tags/同源/" style="font-size: 10px;">同源</a> <a href="/tags/外边距/" style="font-size: 10px;">外边距</a> <a href="/tags/层叠上下文/" style="font-size: 10px;">层叠上下文</a> <a href="/tags/性能优化/" style="font-size: 13.33px;">性能优化</a> <a href="/tags/数据结构/" style="font-size: 10px;">数据结构</a> <a href="/tags/浏览器/" style="font-size: 16.67px;">浏览器</a> <a href="/tags/百分比/" style="font-size: 10px;">百分比</a> <a href="/tags/算法/" style="font-size: 10px;">算法</a> <a href="/tags/精华/" style="font-size: 10px;">精华</a> <a href="/tags/软件下载/" style="font-size: 10px;">软件下载</a> <a href="/tags/鉴权/" style="font-size: 10px;">鉴权</a>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2021 <a href="http://github.com/cai4633/cai4633.github.io" target="_blank">Cai4633</a><br>
      <!--Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>-->
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



    <script>
      let isMobile = false
      if (/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
        isMobile = true
        $("#nav").addClass("is-mobile")
        $("footer").addClass("is-mobile")
      }
      if ($(".local-search").size()) {
        $.getScript("/js/search.js", function () {
          searchFunc("/search.xml", "local-search-input", "local-search-result")
        })
      }
    </script>
  </div>
</body>
</html>